<template>
  <div class="home">
	  <div class="innerBox">
		  <a @click="toDetails(item)" v-for="(item,index) in imgList" :key="item.imgId" href="###">
			  <img :src="`${baseUrl}/${item.userId}/uploads/${item.imgPath}`" alt="">
			  <div>
				  <span v-for="(item,index) in item.tags" :key="index">{{item}}</span>
			  </div>
		  </a>
		  <button @click="getMore" class="getmore">获取更多....</button>
	  </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data(){
	  return{
		  //首页加载默认第一页
		  page:1,
		  //每次只加载九张,列表最后在点击发送请求获取更多
		  imgList:[],
		  
		  baseUrl:'http://127.0.0.1:5000',
		  
	  }
  },
  
  mounted(){
	  this.$api.commonApi.getHomeList(this.page).then((res)=>{
		  // console.log(res)
		  if(res.status ==200&&res.data.status==200){
			  this.imgList = res.data.imgList
			  //将后端返回的壁纸tags字符串转换为数组
			  this.imgList.forEach(item=>{
			  	item.tags = item.tags.split(',')
			  })
		  }
	  })
  },
  methods:{
	  //获取更多壁纸
	  getMore(){
		  this.page++
		  this.$api.commonApi.getHomeList(this.page).then((res)=>{
		  		  if(res.status ==200&&res.data.status==200){
						res.data.imgList.forEach((item)=>{
							item.tags = item.tags.split(',')
							this.imgList.push(item)
						})
		  		  }
		  })
	  },
	  //前往壁纸详情页,把当前壁纸信息传递给详情页路由
	  toDetails(item){
		  this.$router.push({
			  path:'/imgDetails',
			  query:{
				  imgDetail:JSON.stringify(item)
			  }
		  })
	  }
  }
};
</script>

<style lang="less" scoped>
	.home{
		min-height: 100vh;
		background-color: #333;
		padding-top: 120px;
		.innerBox{
			width: 1000px;
			display: flex;
			margin: 0 auto;
			flex-wrap: wrap;
			
			a{	
				overflow: hidden;
				position: relative;
				img{
					width: 300px;
					height: 250px;
					border-radius: 5px;
					margin-left: 33px;
					margin-top: 10px;
				}
				div{
					position: absolute;
					width: 300px;
					height: 30px;
					background-color: rgba(56, 56, 56, 0.7);
					left: 33px;
					border-radius: 3px;
					span{
						margin-left: 10px;
						color: greenyellow;
						font-size: 12px;
					}
				}
			}
			
			a:hover div{
				transition: all 0.3s;
				margin-top: -50px;
			}
			
			.getmore{
				width: 900px;
				height: 40px;
				background-color: #333;
				color: white;
				cursor: pointer;
				margin-left: 65px;
			}
		}
	}
</style>